import { memo, useState } from 'react';
import type { ReactNode, FC } from 'react';
import { DetailMetaInfoWrapper, DetailMetaWrapper } from './style';
import { formatTimestamp, getImgOnSize } from '@/utils/format';
import SongsCtrl from '../songsCtrl';
import { Link } from 'react-router-dom';
import { getAllAlbum, getAllSongs } from '@/service';
import { changeSongs, fetchSongDetail } from '@/views/player/store/player';
import { useAppDispatch } from '@/store/hooks';
import { setCurrentCat } from '@/views/discover/c-components/songs/store/songs';
interface IProps {
  children?: ReactNode;
  currentDetail: any;
  kind: string;
}

const DetailMeta: FC<IProps> = (props) => {
  const { currentDetail, kind } = props;
  const dispatch = useAppDispatch();
  console.log('currentDetail', currentDetail);
  const [expanded, setExpanded] = useState(false); // 展开状态
  async function handlePlayClick() {
    if (kind === 'album') {
      const res: any = await getAllAlbum(currentDetail.id);
      // console.log('handleClick', res);
      dispatch(changeSongs(res.songs));
    } else if (kind === 'playlist') {
      const res: any = await getAllSongs(currentDetail.id);
      dispatch(changeSongs(res.songs));
    } else {
      dispatch(fetchSongDetail({ ids: currentDetail.id, play: true }));
    }
  }
  let shouldTruncate;
  let displayText;
  if (kind === 'album') {
    // 计算是否超过6行
    shouldTruncate = currentDetail.description?.split('\n').length > 6;
    // 获取要显示的内容
    displayText =
      shouldTruncate && !expanded
        ? currentDetail.description.split('\n').slice(0, 6).join('\n')
        : currentDetail.description;
  } else if (kind === 'music') {
    // 计算是否超过6行
    shouldTruncate = currentDetail.description?.split('\n').length > 6;
    // 获取要显示的内容
    displayText =
      shouldTruncate && !expanded
        ? currentDetail.description.split('\n').slice(0, 6).join('\n')
        : currentDetail.description;
  }
  let picUrl = null;
  if (currentDetail?.picUrl) {
    picUrl = currentDetail.picUrl;
  } else {
    picUrl = currentDetail.coverImgUrl;
  }
  // console.log('currentDetail', currentDetail.tags);
  return (
    <DetailMetaWrapper>
      <DetailMetaInfoWrapper>
        <div className="info_img">
          <img src={getImgOnSize(picUrl, 177)} />
          {kind === 'album' && <span className="msk sprite_cover"></span>}
        </div>
        <div className="info">
          {kind === 'album' && (
            <>
              <div className="name">
                <i className="icons"></i>
                <span>{currentDetail.name}</span>
              </div>
              <p>
                {'歌手：'}
                <a href="javascript:void(0)">{currentDetail.artists.name}</a>
              </p>
              <p>{'发行时间：' + formatTimestamp(currentDetail.publishTime, 1)}</p>
              <p>{'发行公司： ' + currentDetail.company}</p>
            </>
          )}
          {kind === 'playlist' && (
            <>
              <div className="p_name">
                <i className="icons"></i>
                <span>{currentDetail.name}</span>
              </div>
              <p>
                <img src={getImgOnSize(currentDetail.creator.avatarUrl, 40)} />
                <a
                  href="javascript:void(0)"
                  style={{
                    marginLeft: '6px',
                  }}
                >
                  {currentDetail.creator.nickname}
                </a>
                <span
                  style={{
                    marginLeft: '6px',
                    fontSize: '11px',
                  }}
                >
                  {formatTimestamp(currentDetail.createTime, 1)}创建
                </span>
              </p>
            </>
          )}
          {kind === 'music' && (
            <>
              <div className="m_name">
                <i className="icons"></i>
                <span>{currentDetail.name}</span>
              </div>
              <div className="single-key">
                歌手：
                <a className="single-val" href="javascript:void(0)">
                  {currentDetail.name}
                </a>
              </div>
              <div className="single-key">
                所属专辑：
                <a className="single-val" href="javascript:void(0)">
                  xxxx
                </a>
              </div>
            </>
          )}
          <SongsCtrl className="ctrl" play={handlePlayClick}></SongsCtrl>
          {kind === 'playlist' && (
            <div className="at_info">
              <div className="tag">
                <span>标签 ：</span>
                {currentDetail.tags.map((tag: string) => {
                  function handleRedirectClick() {
                    dispatch(setCurrentCat(tag));
                  }

                  return (
                    <Link className="item sprite_button" to="/discover/songs" onClick={handleRedirectClick}>
                      <i className="sprite_button"> {tag}</i>
                    </Link>
                  );
                })}
              </div>
              <div className="content">
                <div>介绍</div>
                <p>{currentDetail.description}</p>
              </div>
            </div>
          )}
        </div>
      </DetailMetaInfoWrapper>
      {kind !== 'playlist' && (
        <div className="introduce">
          <h3>{kind === 'album' ? '专辑介绍' : '歌词'}</h3>
          <p className={`content ${shouldTruncate ? 'truncable' : ''}`}>
            {displayText}
            {shouldTruncate && (
              <span className="toggle-more" onClick={() => setExpanded(!expanded)}>
                {expanded ? ' 收起^' : ' 更多...'}
              </span>
            )}
          </p>
        </div>
      )}
    </DetailMetaWrapper>
  );
};

export default memo(DetailMeta);
